<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>表单相关事件</h1>
		<ul>
			<li>onblur</li>
			<li>onfocus</li>
			<li>onchange</li>

			<li>onsubmit</li>
			<li>onrest</li>
		</ul>

		<form action="注册成功.html" onsubmit="return check();">
			用户名:<input type="text" id="nameInput" name="name" onfocus="txtfocus()" onblur="txtblur()" /><span id="nameInfo"></span><br />
			密码: <input type="password" id="passInput" name="passord" onfocus="txtfocus()" onblur="txtblur()" /><br />
			重复密码:<input type="password" id="passInput2" name="passord2" onfocus="txtfocus()" onblur="txtblur()" /><br />
			邮箱:<input type="email" onfocus="txtfocus()" onblur="txtblur()" /><br />
			电话号码:<input type="email" onfocus="txtfocus()" onblur="txtblur()" /><br />

			<input type="submit" value="注册" />
			<input type="reset" value="重置" />
		</form>


		<script type="text/javascript">
			function txtfocus() {
				console.log("获得焦点");
				var obj = event.target;
				obj.style.background = "#ffff66";
			}

			function txtblur() {
				console.log("失去焦点");
				var obj = event.target;
				obj.style.background = "#ffffff";
			}
			// onchange 是在失去焦点时才会判断执行 如果内容改变就会触发onchange事件
			nameInput.onchange = function() {
				console.log("内容改变了")
			}
			
			function check()
			{
				// 判断用户名
				if(nameInput.value.length<6)
				{
					alert("用户名长度不够");
					return false; // 用户输入的内容不符合要求，表单不会提交
				}
				// 判断密码
				// 判断邮箱
				// 判断电话号码
				
				
				return true; // 表单会提交
			}
		</script>



	</body>
</html>
